<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.定义路由 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
			
			<!-- 路由占位符A -->
			<router-view></router-view>
		</div>
		
		<!-- 定义模版标签 -->
		<template id="userTem">
			<div>
				<h1>定义用户组件</h1>
			</div>
		</template>
		
		<template id="dogTem">
			<div>
				<h1>定义宠物组件</h1>
				<!-- 准备2个组件  -->
				<router-link to="/samo">萨摩耶</router-link>
				<router-link to="/bite">比特犬</router-link>
				<!-- 定义路由占位符B -->
				<router-view></router-view>
			</div>
		</template>
		
		<template id="samoTem">
			<div>
				<h3>白色的狗狗</h3>
			</div>
		</template>
		
		<template id="biteTem">
			<div>
				<h3>一只凶猛的狗</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
				
				let userCom = {
					template: "#userTem"
				}
				
				let dogCom = {
					template: "#dogTem"
				}
				
				let samoCom = {
					template: "#samoTem"
				}
				
				let biteCom = {
					template: "#biteTem"
				}
				
				
				
				/* 路由展现问题说明:
					 如果需要进行路由的嵌套 需要采用children 
					 子级的路由会在当前的路由占位符中进行展现
				 */
				//定义路由对象
				let router = new VueRouter({
					routes: [
						{path: "/user", component: userCom},
						{path: "/dog", component: dogCom, children:[
							{path: "/samo", component: samoCom},
							{path: "/bite", component: biteCom}
						]}
					]
				})
				
				//需要vue对象 进行挂载
				const app = new Vue({
					el: "#app",
					//vue对象挂载路由
					router: router
				})
				
				
		</script>
	</body>
</html>